<template>
  <!-- 查询项-->
  <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
    <el-form-item label="重量能力" prop="weightCapacity">
      <el-input
        v-model="queryParams.weightCapacity"
        placeholder="请输入重量能力"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="体积容量" prop="volumeCapacity">
      <el-input
        v-model="queryParams.volumeCapacity"
        placeholder="请输入体积容量"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="运输单位类型" prop="transportUnitTypeId">
      <el-input
        v-model="queryParams.transportUnitTypeId"
        placeholder="请输入运输单位类型"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="描述" prop="description">
      <el-input
        v-model="queryParams.description"
        placeholder="请输入描述"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="重量计量单位" prop="uomForWeight">
      <el-input
        v-model="queryParams.uomForWeight"
        placeholder="请选择或输入重量计量单位"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="showList('Weight')">请选择</el-button>
    </el-form-item>
    <el-form-item label="体积计量单位" prop="uomForVolume">
      <el-input
        v-model="queryParams.uomForVolume"
        placeholder="请选择或输入体积计量单位"
        clearable
        size="small"
        style="width: 240px"
        @keyup.enter.native="handleQuery"
      />
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="showList('Volume')">请选择</el-button>
    </el-form-item>
    <el-form-item>
<!--      <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'Header',
    props:{
      headerForm:Object
    },
    data(){
      return {
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          transportUnitTypeId: undefined,
          description: undefined,
          weightCapacity: undefined,
          uomForWeight: undefined,
          volumeCapacity: undefined,
          uomForVolume: undefined
        },
        isounit:{
          open:false,
          title:"",
          unitType:"",
          type:"header",
        }
      }
    },
    watch:{
      headerForm:{
        handler: function(val) {
            // debugger
            if(this.headerForm.flag){
              this.queryParams.uomForWeight=this.headerForm.unitCode
            }else{
              this.queryParams.uomForVolume=this.headerForm.unitCode
            }
          console.info(val)
          // selectCode:{
          //   unitCode:undefined,
          //     type:"header",
          //     flag:true
          // }
          this.$emit("update:queryParams", this.queryParams);
        },
        deep: true
      }
    },
    created() {
      // this.getList();
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        console.info(this.queryParams.transportUnitTypeId)
        this.$emit("update:queryParams", this.queryParams);
      },
      /** 搜索按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      showList(value) {
        var str = "";
        if(value == "Weight"){
          str= "(重量)";
        }else if(value == "Volume"){
          str= "(体积)";
        }
        this.isounit.open = true;
        this.isounit.title = "选择运输单位类型"+str;
        this.isounit.unitType = value;
        this.$emit("update:isounit", this.isounit);
        // this.getList();
      }
    }
  }
</script>

<style scoped>

</style>
